<!-- 这是选择评价组件 -->
<template>
  <div class="ratingselect">
    <div class="rating-type">
      <!-- 组件定义点击事件，并将事件触发方法传递selectType的值 -->
      <span @click="select(2)" class="block all" :class="{active:selectType===2}" >
        {{desc.all}}
        <span class="number">{{ratings.length}}</span>
      </span>
      <span @click="select(0)" class="block positive" :class="{active:selectType===0}">
        {{desc.positive}}
        <span class="number">{{positives.length}}</span>
      </span>
      <span @click="select(1)" class="block netivate" :class="{active:selectType===1}">
        {{desc.negative}}
        <span class="number">{{negatives.length}}</span>
      </span>
    </div>
    <split></split>
    <div class="switch" @click="toggleContent" :class="{on:onlyContent}">
      <span class="icon icon-check_circle"></span>
      <span class="text" >只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
import split from '@/common/split'
// import Vue from 'vue'
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
  name: 'ratingselect',
  props: {
    ratings: {
      type: Array,
      default() {
        return []
      }
    },
    selectType: {
      type: Number,
      // 父组件中指定默认的值，子组件中其实不用再指定，为了双重保险
      default: ALL
    },
    onlyContent: {
      type: Boolean,
      default: false
    },
    desc: {
      type: Object,
      default () {
        return {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        }
      }
    }
  },
  components: { split },
  data () {
    return {}
  },
  computed: {
    positives () {
      return this.ratings.filter(rating => rating.rateType === POSITIVE)
    },

    negatives () {
      return this.ratings.filter(rating => rating.rateType === NEGATIVE)
    }

  },
  methods: {
    select (type) {
      this.$emit('selected', type)
    },
    toggleContent () {
      this.$emit('toggle')
    }
  }
}
</script>
<style lang='stylus' scoped>
.ratingselect
  width 100%
  .rating-type
    display inline-block
    margin 18px 0
    .block
      font-size 12px
      color rgb(77, 85, 93)
      line-height 12px
      border-radius 2px
      // background-color rgb(0, 160, 220)
      margin-right 8px
      padding 8px
      text-align center
      &.active
        color #fff
      &.all
        background-color rgba(0, 160, 220,0.2)
        &.active
          background-color rgb(0, 160, 220)
      &.positive
        background-color rgba(0,160,220,0.2)
        &.active
          background-color rgb(0, 160, 220)
      &.netivate
        background-color  rgba(77,85,93,0.2)
        &.active
          background-color rgb(77,85,93)
      .number
        font-size 10px
  .switch
    margin 12px auto

    .icon
      font-size 12px
      color rgb(147, 153, 159)
      line-height 12px
    .text
      font-size 12px
      color rgb(147, 153, 159)
      line-height 12px
    &.on
      .icon-check_circle
        color: #00c850
</style>
